import React from 'react'
import {List, InputItem,NavBar,Icon,Grid} from 'antd-mobile'
// import io from 'socket.io-client'
import {connect} from 'react-redux'
import {sendMsg,getMsgList,recvMsg,readMsg} from '../../redux/chat.redux'
// const socket = io('ws://localhost:9093')
import {getChatId} from '../../util'
import QueueAnim from 'rc-queue-anim'
@connect(
  state=>state,
  {sendMsg,getMsgList,recvMsg,readMsg}
)
class Chat extends React.Component{
  constructor(props){
    super(props)
    this.state = {text:'',msg:[],showEmoji:false}
  }

  componentDidMount(){
    if(!this.props.chat.chatmsg.length){
      this.props.getMsgList()
      this.props.recvMsg()
    }
    console.log(this.props)
    const to = this.props.match.params.user
    this.props.readMsg(to)
    // socket.on('recvmsg',data=>{
    //   this.setState({
    //     msg:[...this.state.msg, data.text]
    //   })
    // })
  }
  componentWillUnmount(){
    console.log('component un mount')
  }
  handleSubmit(){
    // socket.emit('sendmsg',{text: this.state.text})
    const from = this.props.user._id
    const to = this.props.match.params.user
    const msg = this.state.text
    this.props.sendMsg({from, to, msg})
    this.setState({text:''})
  }
  fixCarousel(){
    setTimeout(function(){
      window.dispatchEvent(new Event('resize'))
    },0)
  }
  render(){
    const emoji='\uE058 😍 😷 😁 😄 😨 😖 😔 😉 😒 😍 😷 😁 😄 😨 😖 😔 😉 😒 😍 😷 😁 	😄 😨 😖 😔 😉'.split(' ').filter(v=>v).map(v=>({text: v}))
    const userid = this.props.match.params.user
    const Item = List.Item
    const users = this.props.chat.users
    if (!users[userid]){
      return null
    }
    const chatid = getChatId(userid, this.props.user._id)
    const chatmsgs = this.props.chat.chatmsg.filter(v=>v.chatid===chatid)
    return (
      <div id='chat-page'>
        <NavBar 
          icon={<Icon type='left'></Icon>}
          onLeftClick={()=>{
            this.props.history.goBack()
          }}
          mode='dark'>{users[userid].name}</NavBar>
        <QueueAnim delay={100}>
        {chatmsgs.map(v=>{
          const avatar = require(`../imgs/${users[v.from].avatar}.png`)
          return v.from === userid ? (
            <List key={v._id}>
              <Item
                thumb={avatar}
                >{v.content}</Item>
            </List>
          ):(
            <List key={v._id}>
              <Item 
                extra={<img src={avatar} alt={v._id}/>}
                className='chat-me'>{v.content}</Item>
            </List>
          )
          // return <p key={v._id}>{v.content}</p>
        })}
        </QueueAnim>
        <div className="stick-footer">
          <List>
            <InputItem 
              placeholder='请输入'
              value={this.state.text}
              onChange={v=>{
                this.setState({text:v})
              }}
              extra={<div>
                <span 
                onClick={()=>{
                  this.setState({
                    showEmoji:!this.state.showEmoji
                  })
                  this.fixCarousel();
              }} 
              style={{marginRight:10}}><span role="img">😄</span></span>
              <span onClick={()=>this.handleSubmit()}>发送</span></div>}
              ></InputItem>
          </List>
          {this.state.showEmoji ? <Grid 
            data={emoji}
            columnNum={6}
            carouselMaxRow={2}
            isCarousel={true}
            onClick={el=>{
              this.setState({
                text: this.state.text + el.text
              })
            }}></Grid>:null}
          
        </div>
      </div>
    )
  }
}
export default Chat